<template>
  <div class="box">
    <div class="tlist">
      <div class="tlist-top">
        <div class="l1">
          <div class="icon"></div>
          <div class="text">
            <span class="otc">发震时刻</span>
            <span>{{ earthquakeInfo.earthquakeTime }}</span>
          </div>
        </div>
        <div class="l2">
          <div class="icon"></div>

          <div class="text">
            <span class="otc">震中位置</span>
            <span
              ><span class="ott">北纬</span> {{ earthquakeInfo.latitude }} 
              <span class="ott">东经</span>{{ earthquakeInfo.longitude }}</span
            >
          </div>
        </div>
      </div>
      <div class="tlist-bottom">
        <div class="l3">
          <div class="icon"></div>
          <div class="text"
            ><span class="otc">震级</span>
            <span>{{ earthquakeInfo.earthquakeMagnitude }}</span></div
          >
        </div>

        <div class="l4">
          <div class="icon"></div>
          <div class="text">
            <span class="otc">震源深度</span
            ><span>{{ earthquakeInfo.depth }}<span class="ott">公里</span></span></div
          >
        </div>
        <div class="l5">
          <div class="icon"></div>
          <div class="text">
            <span class="otc">最大烈度</span> <span>{{earthquakeInfo.intensity}}<span class="ott">度</span> </span>
          </div>
        </div>
      </div>
    </div>
    <div class="chartbox" ref="chartRef"> </div>
  </div>
</template>  
    
  <script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import { initMap } from '../../api/gis2d/mapbase'
import { useMapStoreStore } from '../../stores/index'
import { AddMapLayer } from '../../api/gis2d/maputils'
import dayjs from 'dayjs'

const route = useRoute()
const router = useRouter()

// const {earthquakeInfo} = useMapStoreStore();
// console.log(earthquakeInfo);

const earthquakeInfo = ref({
  earthquakeTime: '',
  longitude: '',
  latitude: '',
  depth: '',
  earthquakeMagnitude: '',
  intensity:""
})
//添加地图位置
function getData(e) {
  console.log(e)
  const format = 'YYYYMMDDHHmmss'
  const date = dayjs(e.seismDate + '' + e.h + e.m + e.s, format)
  const formattedDate = date.format('YYYY.MM.DD HH:mm:ss')

  earthquakeInfo.value.earthquakeTime = formattedDate
  earthquakeInfo.value.longitude = e.lon
  earthquakeInfo.value.latitude = e.lat
  earthquakeInfo.value.depth = e.depth
  earthquakeInfo.value.earthquakeMagnitude = e.shockLevel
  earthquakeInfo.value.intensity = e.intensity
}

const chartRef = ref(null)
onMounted(() => {})
// 主动暴露childMethod方法
defineExpose({ getData })
</script>  
    
  <style lang="scss" scoped>
.box {
  height: 100%;
  position: relative;
  padding: 0 10px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  color: #fff;
  font-size: 2.96296vh;
}
.tlist {
  margin-bottom: 10px;
  width: 100%;

  .tlist-top {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    .l1,
    .l2 {
      width: calc(50% - 5px);
      height: 10.7407vh;
      background-image: url(/static/assets/cenb.png);
      background-size: 100% 100%;
      display: flex;

      align-items: center;
      justify-content: center;
    }
    .l1 .icon {
      width: 4.1666vw;
      height: 7.4074vh;
      background-image: url(/static/assets/ic1.png);
      background-size: 100% 100%;
      margin-right: 1vw;
    }
    .l2 .icon {
      width: 4.1666vw;
      height: 7.4074vh;
      background-image: url(/static/assets/ic2.png);
      background-size: 100% 100%;
      margin-right: 1vw;
    }
  }
  .tlist-bottom {
    display: flex;
    justify-content: space-between;
    .l3,
    .l4,
    .l5 {
      width: calc(33.33% - 6.666px);
      height: 10.7407vh;
      background-image: url(/static/assets/cens.png);
      background-size: 100% 100%;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .l3 .icon {
      width: 4.1666vw;
      height: 7.4074vh;
      background-image: url(/static/assets/ic3.png);
      background-size: 100% 100%;
      margin-right: 1vw;
    }
    .l4 .icon {
      width: 4.1666vw;
      height: 7.4074vh;
      background-image: url(/static/assets/ic4.png);
      background-size: 100% 100%;
      margin-right: 1vw;
    }
    .l5 .icon {
      width: 4.1666vw;
      height: 7.4074vh;
      background-image: url(/static/assets/ic5.png);
      background-size: 100% 100%;
      margin-right: 1vw;
    }
  }
  .text {
    display: flex;
    flex-direction: column;
    font-weight: 500;
    .ott {
      font-size: 2.5vh;
    }
    .otc {
      font-size: 1.48148vh;
      color: rgba(255, 255, 255, 0.8);
    }
  }
}
.chartbox {
  flex: 1;
  border: 2px solid #336bb4;
  padding: 10px;
  box-sizing: border-box;
}
:deep(.ol-overlaycontainer-stopevent) {
  display: none !important;
}
</style>